<template>
  <div>
    <!-- banner -->
    <div class="message-banner">
      <!-- 背景图片 -->
      <div class="banner-background" :style="cover">
        <!-- 浮动云朵 -->
        <div class="clouds-container">
          <div v-for="n in 6" :key="n" :class="`cloud cloud-${n}`"></div>
        </div>
        
        <!-- 渐变遮罩 -->
        <div class="banner-overlay"></div>
      </div>

      <!-- 弹幕输入框 -->
      <div class="message-container">
        <h1 class="message-title">留言板</h1>
        <div class="message-input-wrapper">
          <el-input class="input" v-model="content" placeholder="说点什么吧" @keyup.enter.native="addToList"
            @focus="show = true"></el-input>
          <el-button style="opacity: .6;" class="ml-3" round @click="addToList" v-show="show">发送</el-button>
        </div>
      </div>
      <!-- 弹幕列表 -->
      <div class="barrage-container">
        <vue-danmaku
        class="danmaku"
          :danmus="barrageList"
          style="height: 100%; width: 100%"
          useSlot
          :speeds="150"
          :channels="15"
        >
          <template v-slot:dm="{ danmu }">
            <span class="barrage-items">
              <img
                :src="danmu.avatar"
                width="30"
                height="30"
                style="border-radius: 50%"
              />
              {{ danmu.nickname }}:{{ danmu.content }}</span
            >
          </template>
        </vue-danmaku>
      </div>
    </div>
  </div>
</template>

<script>
import { getMessagesApi, addMessageApi } from "@/api/message";
import VueDanmaku from 'vue-danmaku';
export default {
  components: {
    VueDanmaku
  },

  data() {
    return {
      show: false,
      content: "",
      count: null,
      timer: null,
      barrageList: [],
      allMessages: [], // 存储所有留言
      displayTimer: null, // 控制显示的定时器
      user: this.$store.state.userInfo,
    };
  },
  mounted() {
    this.listMessage();
  },
  beforeDestroy() {
    if (this.displayTimer) {
      clearTimeout(this.displayTimer);
    }
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    /**
     * 添加留言
     */
    addToList() {
      if (this.count) {
        this.$message.error("30秒后才能再次留言");
        return false;
      }
      if (this.content.trim() === "") {

        this.$message.error("留言不能为空");
        return false;
      }
      var message = {
        avatar: this.user ? this.user.avatar : this.$store.state.webSiteInfo.touristAvatar,
        status: 1,
        nickname: this.user ? this.user.nickname : "游客",
        content: this.content
      };

      this.content = "";
      addMessageApi(message).then(res => {
        // 添加到所有留言列表
        this.allMessages.push(message);
        // 立即添加到弹幕显示
        this.barrageList.push(message);
        
        // 控制弹幕列表长度
        if (this.barrageList.length > 15) {
          this.barrageList.shift();
        }
        
        this.$message.success("留言成功");
      }).catch(err => {
        this.$message.error("留言失败");
      });
      const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 30) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    /**
     * 获取留言列表
     */
    listMessage() {
      getMessagesApi().then(res => {
        this.allMessages = res.data || [];
        this.startDisplayMessages();
      });
    },
    /**
     * 开始分批显示留言
     */
    startDisplayMessages() {
      if (this.allMessages.length === 0) return;
      
      // 打乱留言顺序，让每次显示都有不同的效果
      const shuffledMessages = [...this.allMessages].sort(() => Math.random() - 0.5);
      
      // 先显示前几条留言
      const initialCount = Math.min(2, shuffledMessages.length);
      this.barrageList = shuffledMessages.slice(0, initialCount);
      
      let currentIndex = initialCount;
      
      // 使用递归setTimeout来实现随机间隔
      const addNextMessage = () => {
        if (currentIndex < shuffledMessages.length) {
          // 添加新留言
          this.barrageList.push(shuffledMessages[currentIndex]);
          currentIndex++;
          
          // 控制弹幕列表长度，避免过多留言同时显示
          if (this.barrageList.length > 12) {
            this.barrageList.shift();
          }
          
          // 设置下一次显示的随机间隔
          this.displayTimer = setTimeout(addNextMessage, this.getRandomInterval());
        } else {
          // 所有留言显示完后，重新打乱并循环显示
          const newShuffled = [...this.allMessages].sort(() => Math.random() - 0.5);
          currentIndex = 0;
          this.barrageList = [];
          
          // 重新开始显示前几条
          const restartCount = Math.min(2, newShuffled.length);
          this.barrageList = newShuffled.slice(0, restartCount);
          currentIndex = restartCount;
          
          // 更新打乱后的数组
          shuffledMessages.splice(0, shuffledMessages.length, ...newShuffled);
          
          // 继续循环
          this.displayTimer = setTimeout(addNextMessage, this.getRandomInterval());
        }
      };
      
      // 开始第一次显示
      this.displayTimer = setTimeout(addNextMessage, this.getRandomInterval());
    },
    /**
     * 获取随机显示间隔
     */
    getRandomInterval() {
      // 返回1.5-3秒之间的随机间隔
      return Math.floor(Math.random() * 1500) + 1500;
    },
    /**
     * 停止显示留言
     */
    stopDisplayMessages() {
      if (this.displayTimer) {
        clearTimeout(this.displayTimer);
        this.displayTimer = null;
      }
    }
  },
  computed: {
    cover() {
      var cover = "https://blog-wyy-1252271603.cos.ap-shanghai.myqcloud.com/20251107/article-cover/banner.jpg";
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  border-radius: 50px;
  opacity: .6;
}

.message-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  animation: header-effect 1s;
}

// 背景图片
.banner-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: slowZoom 30s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

// 渐变遮罩
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

// 浮动云朵
.clouds-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  
  .cloud {
    position: absolute;
    background: white;
    border-radius: 100px;
    opacity: 0.5;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      background: white;
      border-radius: 100px;
    }
  }
  
  .cloud-1 {
    width: 100px;
    height: 40px;
    top: 15%;
    animation: floatCloud 25s infinite linear;
    
    &::before {
      width: 50px;
      height: 50px;
      top: -25px;
      left: 10px;
    }
    
    &::after {
      width: 60px;
      height: 40px;
      top: -15px;
      right: 10px;
    }
  }
  
  .cloud-2 {
    width: 120px;
    height: 48px;
    top: 35%;
    animation: floatCloud 30s infinite linear 5s;
    
    &::before {
      width: 60px;
      height: 60px;
      top: -30px;
      left: 15px;
    }
    
    &::after {
      width: 70px;
      height: 48px;
      top: -20px;
      right: 15px;
    }
  }
  
  .cloud-3 {
    width: 90px;
    height: 36px;
    top: 55%;
    animation: floatCloud 28s infinite linear 10s;
    
    &::before {
      width: 45px;
      height: 45px;
      top: -22px;
      left: 10px;
    }
    
    &::after {
      width: 55px;
      height: 36px;
      top: -14px;
      right: 10px;
    }
  }
  
  .cloud-4 {
    width: 110px;
    height: 44px;
    top: 25%;
    animation: floatCloud 32s infinite linear 15s;
    
    &::before {
      width: 55px;
      height: 55px;
      top: -28px;
      left: 12px;
    }
    
    &::after {
      width: 65px;
      height: 44px;
      top: -18px;
      right: 12px;
    }
  }
  
  .cloud-5 {
    width: 95px;
    height: 38px;
    top: 65%;
    animation: floatCloud 27s infinite linear 8s;
    
    &::before {
      width: 48px;
      height: 48px;
      top: -24px;
      left: 10px;
    }
    
    &::after {
      width: 55px;
      height: 38px;
      top: -16px;
      right: 10px;
    }
  }
  
  .cloud-6 {
    width: 105px;
    height: 42px;
    top: 45%;
    animation: floatCloud 26s infinite linear 12s;
    
    &::before {
      width: 52px;
      height: 52px;
      top: -26px;
      left: 11px;
    }
    
    &::after {
      width: 62px;
      height: 42px;
      top: -17px;
      right: 11px;
    }
  }
}

@keyframes floatCloud {
  0% {
    left: -15%;
  }
  100% {
    left: 115%;
  }
}

.message-container {
  position: absolute;
  width: 360px;
  top: 35%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  margin: 0 auto;
  color: #fff;

  .message-title {
    color: #eee;
    animation: title-scale 1s;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .message-input-wrapper {
    display: flex;
    justify-content: center;
    height: 2.5rem;
    margin-top: 2rem;

    .ml-3 {
      animation: left-in 1s ease;

      @keyframes left-in {
        0% {
          transform: translateY(-500%);
        }

        100% {
          transform: translateX(0);
        }
      }
    }
  }
}

.barrage-container {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;

  .barrage-items {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 100px;
    color: #fff;
    padding: 5px 10px 5px 5px;
    align-items: center;
    display: flex;
    margin-top: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}
</style>